<div id="mobile-menu" class="relative z-50 hidden group" role="dialog" aria-modal="true">
  <div
    class="fixed inset-0 bg-gray-900/80 transition-opacity ease-linear duration-300 opacity-0 group-[.mobile-menu-open]:opacity-100"
  ></div>
  <div class="fixed inset-0 flex">
    <div
      class="relative mr-16 flex w-full max-w-xs flex-1 transition ease-in-out duration-300 transform -translate-x-full group-[.mobile-menu-open]:translate-x-0"
    >
      <div
        class="absolute left-full top-0 flex w-16 justify-center pt-5 ease-in-out duration-300 opacity-0 group-[.mobile-menu-open]:opacity-100"
      >
        <button type="button" class="toggle-mobile-menu -m-2.5 p-2.5">
          <span class="sr-only">Close sidebar</span>
          <%== part("components/icon", name: "hero-x-mark", classes: "h-6 w-6 text-white") %>
        </button>
      </div>
      <%== render("layouts/sidebar/content") %>
    </div>
  </div>
</div>
